﻿<div class="with-progress" data-bind="spinner: spinner">
    <p data-bind="visible: records().length == maxCount()">
        Note: that only&nbsp;<span data-bind="text: maxCount()"></span>&nbsp;records are shown. To see more use filter.
    </p>
    <p data-bind="visible: records().length == 0">
        No rows found matching your criteria.
    </p>
    <table class="data" data-bind="visible: records().length > 0">
        <thead>
            <tr>
                <th class="actions"></th>
                <!-- ko foreach: tableColumns.selected -->
                <th data-bind="text: name, title: name, css: { partitionKey: name() == 'PartitionKey', rowKey: name() == 'RowKey', timestamp: name() == 'Timestamp' }"></th>
                <!-- /ko -->

            </tr>
        </thead>
        <tbody data-bind="foreach: pager.items">
            <tr data-bind="css: $parent.getRecordMarkers($data, $parent.markers())">
                <td>
                    <a href="javascript:void(0)" data-bind="modalOpen: 'tableRecordDetails', click: function() {$parents[1].recordView.forRecord($parent.schema(), $data)}">edit</a>
                    <a href="javascript:void(0)" data-bind="modalOpen: 'deleteTableRecord', click: $parents[1].deleteRecordDetails.init" title="Remove Record">remove</a>
                </td>
                <!-- ko foreach: $parent.tableColumns.selected-->
                <td data-bind="text: $parent.values[name()], title: $parent.values[name()]"></td>
                <!-- /ko -->
            </tr>
        </tbody>
    </table>
</div>
